<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/hohoplay/common/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/robot">
        <img src="~@/assets/hohoplay/common/back.png">
      </router-link>
    </div>
    <div class="type">
      <img src="~@/assets/robot/common/robottitle.png">
    </div>
    <div class="option1" v-on:click="jibie">
      <img src="~@/assets/robot/common/jibie.png">
    </div>
    <div class="option2" v-show="xiala">
      <div class="option2_1" v-show="!up_semerster" @click="change_semerster()">
        上学期
      </div>
      <div class="option2_1" v-show="up_semerster" @click="change_semerster()">
        下学期
      </div>
      <router-link :to="{name: 'cailiao-base', query: {compoent: 'cailiao1'}}">
        材料
      </router-link>
    </div>
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/images/common/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/images/common/right.png">
    </div>
    <ul class="ul-item" v-show="up_semerster">
      <li class="li-item" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="setCur(item)">{{item.text}}</li>
    </ul>
    <ul class="ul-item" v-show="!up_semerster">
      <li class="li-item" v-for='(item, index) in tabs2' :key="index" :class="{'active': item.isSelected}" @click="setCur2(item)">{{item.text}}</li>
    </ul>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
import grade1 from './grade1'
import grade2 from './grade2'
import grade3 from './grade3'
import grade4 from './grade4'
import grade5 from './grade5'
import grade6 from './grade6'
export default {
  name: 'grade_base',
  data () {
    return {
      xiala: false,
      up_semerster: true,
      currentIndex: 1,
      currentView: 'robot-grade1',
      tabs: [{
        isSelected: 1,
        name: 'robot-grade1',
        text: '一级上'
      }, {
        isSelected: 0,
        name: 'robot-grade2',
        text: '二级上'
      }, {
        isSelected: 0,
        name: 'robot-grade3',
        text: '三级上'
      }],
      tabs2: [{
        isSelected: 1,
        name: 'robot-grade4',
        text: '一级下'
      }, {
        isSelected: 0,
        name: 'robot-grade5',
        text: '二级下'
      }, {
        isSelected: 0,
        name: 'robot-grade6',
        text: '三级下'
      }]
    }
  },
  components: {
    'robot-grade1': grade1,
    'robot-grade2': grade2,
    'robot-grade3': grade3,
    'robot-grade4': grade4,
    'robot-grade5': grade5,
    'robot-grade6': grade6
  },
  created () {
    let that = this
    that.currentView = 'robot-grade1'
    if (that.$route.query.compoent !== undefined) {
      // 传入参数时修改
      that.currentView = that.$route.query.compoent
      this.currentIndex = parseInt(that.$route.query.compoent.substr(-1))
      this.tabs.forEach(item => {
        item.isSelected = (item.name === that.$route.query.compoent)
      })
      this.tabs2.forEach(item => {
        item.isSelected = (item.name === that.$route.query.compoent)
      })
      if (this.currentIndex > 3) {
        this.up_semerster = false
      }
    }
  },
  methods: {
    jibie: function () {
      this.xiala = !this.xiala
    },
    setCur: function (selectedItem) {
      this.currentView = selectedItem.name
      this.currentIndex = parseInt(this.currentView.substr(-1))
      this.tabs.forEach(item => {
        item.isSelected = (item.name === selectedItem.name)
      })
    },
    setCur2: function (selectedItem) {
      this.currentView = selectedItem.name
      this.currentIndex = parseInt(this.currentView.substr(-1))
      this.tabs2.forEach(item => {
        item.isSelected = (item.name === selectedItem.name)
      })
    },
    toggleTabs: function (func) {
      if (func === 'add') {
        if (this.up_semerster) {
          if (this.currentView !== 'robot-grade3') {
            this.currentIndex = this.currentIndex + 1
            this.currentView = 'robot-grade' + this.currentIndex
          }
        } else {
          if (this.currentView !== 'robot-grade6') {
            this.currentIndex = this.currentIndex + 1
            this.currentView = 'robot-grade' + this.currentIndex
          }
        }
      } else {
        if (this.up_semerster) {
          if (this.currentView !== 'robot-grade1') {
            this.currentIndex = this.currentIndex - 1
            this.currentView = 'robot-grade' + this.currentIndex
          }
        } else {
          if (this.currentView !== 'robot-grade4') {
            this.currentIndex = this.currentIndex - 1
            this.currentView = 'robot-grade' + this.currentIndex
          }
        }
      }
      this.tabs.forEach(item => {
        item.isSelected = (item.name === this.currentView)
      })
      this.tabs2.forEach(item => {
        item.isSelected = (item.name === this.currentView)
      })
    },
    change_semerster () {
      this.tabs.forEach(item => {
        item.isSelected = 0
      })
      this.tabs2.forEach(item => {
        item.isSelected = 0
      })
      this.up_semerster = !this.up_semerster
      this.xiala = false
      if (this.up_semerster) {
        this.currentIndex = 1
        this.currentView = 'robot-grade1'
        this.tabs[0].isSelected = 1
      } else {
        this.currentIndex = 4
        this.currentView = 'robot-grade4'
        this.tabs2[0].isSelected = 1
      }
    }
  }
}
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root {
  color: #999999;
  font-size: 22pt;
  background: url(~@/assets/robot/common/gradebg.png);
}
.root > div {
  position: absolute;
  user-select: none;
}
a{
  color:white;
  text-decoration: none;
}
.ul-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 72px;
  left: 540px;
  height: 35px;
  width: 280px;
  position: absolute;
}
.li-item {
  cursor: pointer;
  float: left;
  border-left: 2px solid #000;
  height: 35px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 26px;
}
li:last-child{
  border-right: 0;
}
.active {
  color: #000;
}
.home {
  top: 54px;
  left: 57px;
  z-index: 10;
}
.back {
  top: 153px;
  left: 57px;
  z-index: 10;
}
.type {
  z-index: 10;
  top: 50px;
  left: 418px;
}
.left {
  z-index: 10;
  top: 370px;
  left: 118px;
}
.right {
  z-index: 10;
  top: 370px;
  left: 1135px;
}
.option1{
  z-index: 10;
  top: 73px;
  left: 460px;
  cursor: pointer;
}
.option2{
  z-index: 10;
  top: 110px;
  left: 450px;
  cursor: pointer;
  width:85px;
  height:40px;
  text-align: center;
  background-color: rgb(236,131,107);
  color:white;
  font-size: 22px;
  height: auto;
  }
  .option2_1 {
    width: 90%;
    height: 25px;
    margin: 0 auto;
    border-bottom: 1px solid white;
  }
</style>
